<script lang="ts" setup>
import { reactive, ref } from "vue";
import router from "@/router/index";
import { AuthStore } from "@/stores/modules/auth";
import { type FormInstance, type FormRules } from "element-plus";
// import SelectUser from "@/components/selectUser/SelectUser.vue";

const authStore = AuthStore();

const loginFormRef = ref<FormInstance>();

const loginFormRules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "Please input Activity username",
      trigger: "change",
    },
  ],
  password: [
    { required: true, message: "Please input password", trigger: "change" },
  ],
});

// do not use same username with ref
const loginForm = reactive({
  username: "lihaoran",
  password: "long1234",
  remember: true,
  readme: false,
});

const loading = ref<boolean>(false);
const unCheck = ref<boolean>(false);

const onSubmit = async (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!loginForm.readme) {
    unCheck.value = true;
    setTimeout(() => {
      unCheck.value = false;
      loading.value = false;
    }, 1000);
    // eslint-disable-next-line no-undef
    ElMessage.warning({
      message: `请先阅读协议`,
      type: "warning",
      grouping: true,
    });
    return;
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      try {
        authStore
          .userLogin({
            type: "password",
            subData: {
              ...loginForm,
            },
          })
          .then(() => {
            authStore
              .updatePerms()
              .then(() => {
                router.push({
                  path: "/",
                });
                loading.value = false;
              })
              .catch((err: any) => {
                console.log(err);
                loading.value = false;
              });
          })
          .catch((err: any) => {
            console.log(err);
            loading.value = false;
          });
      } catch (error) {
        console.log("error submit!!");
        loading.value = false;
      }
    } else {
      loading.value = false;
      // eslint-disable-next-line no-undef
      ElMessage({
        type: "warning",
        message: "请填写正确的用户名及密码",
        grouping: true,
      });
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0" size="large"
    :show-message="false" inline-message status-icon>
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" placeholder="用户名/邮箱" prefix-icon="User" />
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" placeholder="密码" type="password" show-password prefix-icon="Lock" />
    </el-form-item>
    <el-form-item prop="remember">
      <div class="flex justify-between w-full h-full">
        <div>
          <el-checkbox v-model="loginForm.remember">{{
            $t("account.remember")
          }}</el-checkbox>
        </div>
        <div>
          <el-link type="primary" :underline="false" @click="() => {
            router.push({ path: '/account/register' });
          }
            ">{{ $t("account.goRegister") }}</el-link>
          <el-divider direction="vertical" />
          <el-link type="primary" :underline="false" @click="() => {
            router.push({
              path: '/account/forget',
              query: { username: loginForm.username },
            });
          }
            ">{{ $t("account.forgot") }}</el-link>
        </div>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="w-full" auto-insert-space @click="onSubmit(loginFormRef)" :loading="loading">{{
        loading ? "" : $t("account.login") }}
      </el-button>
    </el-form-item>
    <el-form-item class="m-0" prop="readme">
      <div class="w-full animate__animated" :class="{ animate__bounce: unCheck, 'text-red-600': unCheck }">
        <el-checkbox v-model="loginForm.readme"><span>阅读并接受</span></el-checkbox>
      </div>
    </el-form-item>
  </el-form>
  <!-- <SelectUser /> -->
</template>
